<script setup>
import { onMounted } from 'vue'
// beforeCreate 和 created 的相关代码
// 一律放在setup中执行
const getList = () => {
  console.log('执行了')
}
// 一进入页面的请求
getList()

// 如果有些代码需要在mounted生命周期中执行
onMounted(() => {
  console.log('mounted生命周期函数-逻辑1')
})

// 写成函数的调用方式，可以调用多次，并不会冲突，而是按照顺序依次执行
onMounted(() => {
  console.log('mounted生命周期函数-逻辑2')
})
</script>

<template>
  
</template>

<!--
Vue2 生命周期：
beforeCreate // 在实例创建之前调用，此时还没有挂载，数据观测 (data observer) 和事件尚未初始化
created // 实例创建完成后调用，此时已经完成了数据观测 (data observer) 和事件初始化，但尚未挂载 DOM
beforeMount // 在挂载之前调用，相关的 render 函数首次被调用。可以在此时对模板进行编译和渲染
mounted // 实例已经挂载到 DOM 上后调用。在这个时候，所有的 el 和 ref 都已经被解析，并且 $refs 已经被填充
beforeUpdate // 数据更新时调用，发生在虚拟 DOM 打补丁之前。可以在此时进行状态更新或手动更改 DOM
updated // 数据更新完成后调用，发生在虚拟 DOM 打补丁和 DOM 更新之后
beforeDestroy // 实例销毁之前调用。在这个阶段，实例仍然完全可用
destroyed // 实例销毁后调用。调用后，所有的事件监听器和子组件都将被移除，所有的子组件的 destroyed 钩子也会被调用
activated // 当被激活的 keep-alive 组件重新进入时调用
deactivated // 当被激活的 keep-alive 组件离开时调用
errorCaptured // 在捕获阶段处理错误时调用。如果这个钩子没有返回值，或者返回 false，那么父组件的 errorCaptured 钩子会被继续调用；否则，该错误不会被进一步处理
getDerivedStateFromProps // 在每次渲染之前都会调用，用于从 props 派生出状态。这是一个静态方法，可以在组件创建之前或在组件销毁之后进行更改。
renderTracked 和 renderTriggered // 这两个钩子是在渲染过程中触发的，前者在跟踪渲染时触发，后者在强制触发渲染时触发
setup // 在 Vue3 中，组件选项 API 被 Composition API 替代。setup 函数是 Composition API 的入口点，用于组织和复用组件逻辑。它是一个新的、更强大、更灵活的方式来定义组件选项。


Vue3 Composition API 生命周期：
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onErrorCaptured
onRenderTracked
onRenderTriggered

setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount() : 组件挂载到节点上之前执行的函数；
onMounted() : 组件挂载完成后执行的函数；
onBeforeUpdate(): 组件更新之前执行的函数；
onUpdated(): 组件更新完成之后执行的函数；
onBeforeUnmount(): 组件卸载之前执行的函数；
onUnmounted(): 组件卸载完成后执行的函数；
onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。
-->

<style scoped>
</style>
